<template>
  <div class="create-creative" ref="createCreative">
    <a-modal
      :getContainer="() => createCreative"
      :open="previewData.visible"
      :maskClosable="false"
      :width="previewData.width + 'mm'"
      @cancel="hideModal"
    >
      <a-spin :spinning="previewData.spinning" style="min-height: 100px">
        <div id="preview_content_design"></div>
      </a-spin>
      <template #title>
        <a-space>
          <div style="margin-right: 20px">打印预览</div>
          <a-button :loading="previewData.waitShowPrinter" type="primary" @click.stop="print">
            <template #icon><printer-outlined /></template>
            打印
          </a-button>
          <a-button type="primary" @click.stop="toPdf">
            <template #icon><download-outlined /></template>
            导出PDF
          </a-button>
        </a-space>
      </template>
      <template #footer>
        <a-button key="close" type="info" @click="hideModal"> 关闭 </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { PrinterOutlined, DownloadOutlined } from '@ant-design/icons-vue'
export default {
  name: 'print-preview',
  components: { PrinterOutlined, DownloadOutlined },
  setup() {
    const createCreative = ref(null)
    const previewData = reactive({
      visible: false,
      spinning: true,
      waitShowPrinter: false,
      width: 0, // 纸张宽 mm
      hiprintTemplate: {}, // 模板
      printData: {} // 数据
    })
    const hideModal = () => {
      previewData.visible = false
    }
    const show = (hiprintTemplate, printData, width = '210') => {
      previewData.visible = true
      previewData.spinning = true
      previewData.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width
      // previewData.width = width
      previewData.hiprintTemplate = hiprintTemplate
      previewData.printData = printData
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        $('#preview_content_design').html(hiprintTemplate.getHtml(printData))
        previewData.spinning = false
      }, 500)
    }
    const print = () => {
      previewData.waitShowPrinter = true
      previewData.hiprintTemplate.print(
        previewData.printData,
        {},
        {
          callback: () => {
            console.log('callback')
            previewData.waitShowPrinter = false
          }
        }
      )
    }
    const toPdf = () => {
      previewData.hiprintTemplate.toPdf(previewData.printData, '打印预览')
    }
    onMounted(() => {})
    return {
      createCreative,
      previewData,
      hideModal,
      show,
      print,
      toPdf
    }
  }
}
</script>
<style lang="scss" scoped>
.create-creative {
  :deep(.ant-modal-content) {
    padding: 0px;
    margin-bottom: 24px;
  }
  :deep(.ant-modal-header) {
    padding: 16px 24px;
    color: rgba(0, 0, 0, 0.65);
    border-bottom: 1px solid #e8e8e8;
  }
  :deep(.ant-modal-body) {
    padding: 0px;
  }
  :deep(.ant-modal-footer) {
    padding: 10px 16px;
    text-align: right;
    background: transparent;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
  }
}
</style>
